<template>
	<!-- 拼单成功 -->
	<view class="relative">
		<view class="au_imList">
			<view class="isNull flex justify-center align-center">
				<text class="fcon-wancheng" style="font-size: 50rpx;color:#53A87F;margin-right: 30rpx;" v-if="spoStates=='0'"></text>
				<view v-if="spoStates=='0'">拼单成功！</view>
				<view v-if="spoStates=='1'">拼单失败！</view>
			</view>
			<view class="is_redc" v-if="spoStates=='0'">本次拼单已省<text style="color: #F66969;">4.3</text>元</view>
			<view class="is_redc" v-if="spoStates=='1'">您的订单已取消，期待再次光临</view>
      <view class="aut_list flex justify-center align-center">
				<view class="au_item" v-for="(item,index) in orderInfo" :key="index" v-show="isOrder&&spoStates=='0'">
					  <image :src="item.userAut" class="au_ims" v-if="item.userAut"></image>
						<view v-else class="isEnd flex justify-center align-center">?</view>
						<view class="sendUser" v-if="item.userId==loginUserIds&&isOrder">发起人</view>
				</view>
			</view>  
			<view class="yq_btn flex justify-between align-center">
				  <view class="btn_acts btn_toHome" @click="changeRoute('/pages/index/home/home')">去首页转转</view>
				  <view class="btn_acts btn_toOrder" @click="toDetails" v-if="spoStates=='0'">查看订单</view>
				  <view class="btn_acts btn_toOrder" v-if="spoStates=='1'" @click="changeRoute('/pages/index/menu/menu')">再来一单</view>
			</view>
		</view>
   <view class="list_tit">拼单列表</view>
  	<scroll-view class="list_box" scroll-y scroll-with-animation>
  		<view class="box_item" v-for="(item,index) in orderInfo" :key="index" v-show="item.userId!='-1'">
  			<view class="item_user flex justify-between align-center">
  				 <view class="u_inf flex">
						 <view class="u_img">
						 	<image :src="item.userAut" class="u_is"></image>
						 </view>
						 <view class="u_na">{{item.usaerName}}</view>
						 <view class="mySelf" v-if="item.userId==loginUserIds">我</view>
					 </view>						
  			</view>
				<view class="shop_list" v-for="(it,ind) in item.carList" key="ind">
					   <view class="shop_base_info">
					   	   <view class="ba_name">{{it.shopName}} </view>
								 <view class="ba_num">X{{it.shopNum}}</view>
					   	   <view class="ba_pri"><text style="font-size: 20rpx;margin-right: 6rpx;">¥</text>{{it.shopPrice}}</view> 
					   </view>
						 <view class="base_kcal">
							 <text class="kc_spe">{{it.shopSpe}}</text>
							 <text class="cuIcon-title" style="color: #4F585E;"></text>
							 <text class="kc_k">{{it.kacl}}Kcal</text>
						 </view>
				</view>
				<view class="pack_cost">
					 <view class="pc_text">包装费</view>
					 <view class="pc_text">¥{{item.packing}}</view>
				</view>
  		</view>
  	</scroll-view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { mnavTo } from '@/utils/helper';
	const imgBaseUrl = ref("https://cdn-static.yekjx.com/food/images/")
	const loginUserIds=ref("100001")
	const isOrder=ref(true)
	const spoStates=ref('0') //'0'拼单成功，'1'拼单失败
	const orderInfo = ref([
		{
			userId:"100001",
			userAut: imgBaseUrl.value + "ushead.png",//用户头像
			usaerName: "Jynn",//用户名
			carList: [
				{
					shopName: "山茶油黄焖香剪黄鸭",//商品名称
					shopNum: 1,//商品数量
					shopPrice: "99.0",//商品价格
					shopSpe: "1条/份",//商品规格
					kacl: "111",//商品卡路里
				},{
					shopName: "铁板烤鸭",//商品名称
					shopNum: 1,//商品数量
					shopPrice: "20.0",//商品价格
					shopSpe: "1只/份",//商品规格
					kacl: "500",//商品卡路里
				}
			],
			packing: "1",//包装费
		}, {
			userId:"100002",
			userAut: imgBaseUrl.value + "car_img01.png",//用户头像
			usaerName: "fLQ173028328",//用户名
			carList: [
				{
					shopName: "手撕鸡",//商品名称
					shopNum: 1,//商品数量
					shopPrice: "17.0",//商品价格
					shopSpe: "小小份(约100g)",//商品规格
					kacl: "178",//商品卡路里
				}
			],
			packing: "1",//包装费
		}, {
			userId:"-1",
			userAut:"",
			usaerName: "",//用户名
			carList: [],
			packing: "1",//包装费
		}
	])
	const changeRoute=(url:any)=>{
		uni.switchTab({
			url: url
		});
	}
	onLoad(()=>{
		let result:any=orderInfo.value.find(order => order.userId === loginUserIds.value)
		if(result.carList.length==0){
			 isOrder.value=false
		}else{
			isOrder.value=true
		}
	})
	// 去详情
	const toDetails = ( ) => {
		let status=3
		let type=1//
		let Invoicing='0'
		let text= '已用餐'
		uni.redirectTo({
			url: `/pages/order/orderDetails/orderDetails?id=${status}&&type=${type}&&invoicing=${Invoicing}&&text=${text}&&activeType=pindan`
		})
	}
</script>

<style lang="scss" scoped>
	.au_imList {
		width: 100%;
		height: 408rpx;
		background-color: #fff;
		padding: 40rpx 0rpx 10rpx 0rpx;
		.isNull{
			color: #333;
			font-family: "Microsoft YaHei UI";
			font-size: 40rpx;
			font-weight: 400;
			text-align: center;
		}
		.is_redc{
			color: #666;
			font-family: "Microsoft YaHei UI";
			font-size: 24rpx;
			font-weight: 400;
			text-align: center;
			margin-top: 15rpx;
		}
		.aut_list{
			width: 100%;
			height:98rpx;
			margin-top: 40rpx;
			padding:0rpx 20rpx 0rpx 20rpx;
			.au_item{
				width: 97rpx;
				height:97rpx;
				border-radius: 50%;
				position: relative;
	      &:nth-child(n+2){
					margin-left:30rpx;
				}
				.sendUser{
					position: absolute;
					bottom:-15rpx;
					left: 0;
					width: 88rpx;
					height: 36rpx;
					border-radius: 34rpx;
					background-color: #FE270B;
					color: #FFF;
					font-family: "Microsoft YaHei UI";
					font-size:24rpx;
					font-weight: 400;
					text-align: center;
					line-height: 36rpx;
				}
				.au_ims{
					width:100%;
					height:100%;
					border-radius: 50%;
				}
				.isEnd{
					width:100%;
					height:100%;
					border:2rpx dashed #D9D9D9;
					border-radius: 50%;
					color: rgba(217, 217, 217, 0.60);
					font-family: "Microsoft YaHei UI";
					font-size: 32rpx;
					font-weight: 700;
				}
			}
		}
		.yq_btn{
			width:100%;
			height: 80rpx;
			margin-top: 43rpx;
			font-family: ABeeZee;
			font-size: 32rpx;
			font-weight: 400;
			text-align: center;
			line-height: 80rpx;
			padding: 0rpx 35rpx 0rpx 35rpx;
			.btn_acts{
				width: 310rpx;
				height: 100%;
				border-radius: 10rpx;
			}
			.btn_toOrder{
				color:#fff;
				background: #53A87F;
			}
			.btn_toHome{
				color:#53A87F;
				border: 2rpx solid #53A87F;
			}
		}
	}
 .list_tit{
	 color: #666;
	 font-family: "Microsoft YaHei UI";
	 font-size:28rpx;
	 font-weight: 400;
	 margin:30rpx 20rpx 30rpx 20rpx;
 }
 .list_box{
	 width: 100vw;
	 height: calc(100vh - 570rpx);
	 .box_item{
		 width: 100%;
		 min-height:296rpx;
		 background-color: #fff;
		 padding: 10rpx 0rpx 10rpx 0rpx;
		 &:nth-child(n+2){
			  margin-top: 15rpx;
		 }
		 .item_user{
			 width: 100%;
			 height:90rpx;
			 border-bottom: 2rpx solid #F8F8F8;
			 padding: 0rpx 30rpx 0rpx 20rpx;
			 .u_inf{
				  .u_img{
				  width: 60rpx;
				  height:60rpx;
					.u_is{
						width:100%;
						height:100%;
						border-radius: 50%;
					}
			  }
				.u_na{
					color: #333;
					font-family: "Microsoft YaHei UI";
					font-size: 28rpx;
					font-weight: 400;
					margin:11rpx 0rpx 0rpx 20rpx;
				}
				.mySelf{
					color: #999;
					min-width: 42rpx;
					height: 42rpx;
					border-radius: 8rpx;
					border: 2rpx solid #999;
					text-align: center;
					line-height:38rpx;
					margin:11rpx 0rpx 0rpx 10rpx;
				}
			 }
			 .u_action{
					 .btn_clear{
						 width: 88rpx;
						 height:52rpx;
						 border: 2rpx solid #999;
						 text-align: center;
						 line-height:52rpx;
						 border-radius: 10rpx;
						 color: #999;
						 font-family: "Microsoft YaHei UI";
						 font-size: 28rpx;
						 font-weight: 400;
						 margin-right:20rpx;
					 }
					 .btn_edit{
						 width: 152rpx;
						 height:52rpx;
						 text-align: center;
						 line-height:52rpx;
						 border-radius: 10rpx;
						 color: #FFF;
						 font-family: "Microsoft YaHei UI";
						 font-size: 28rpx;
						 font-weight: 400;
						 background: #53A87F;
					 }
			 }

		 }
	 }
	 .shop_list{
		 width: 100%;
		 min-height: 20rpx;
		 // border-bottom:1rpx solid #F8F8F8;
		 padding:15rpx 30rpx 10rpx 93rpx;
		 .shop_base_info{
			 display: flex;
			 justify-content: space-between;
			 margin-top: 6rpx;
			 .ba_num{
				 color: #666;
				 font-family: "Microsoft YaHei UI";
				 font-size: 28rpx;
				 font-weight: 400;
				 margin-top: 7rpx;
			 }
			 .ba_name{
				 color: #333;
				 font-family: "Microsoft YaHei UI";
				 font-size: 32rpx;
				 font-weight: 400;
				 min-width: 440rpx;
			 }
			 .ba_pri{
				 color: #333;
				 font-family: "Microsoft YaHei UI";
				 font-size: 36rpx;
				 font-weight: 700;
				 min-width: 120rpx;
				 text-align: right;
			 }
		 }
		 .base_kcal{
			  margin-top: 6rpx;
			 .kc_spe{
				 color: #666;
				 font-family: "Microsoft YaHei UI";
				 font-size: 28rpx;
				 font-weight: 400;
			 }
			 .kc_k{
				 color:#9B9B9B;
				 font-family: "Microsoft YaHei UI";
				 font-size: 28rpx;
				 font-weight: 400;
			 }
		 }
	 }
	 .pack_cost{
		  width: 100%;
	 	  display: flex;
	 	  justify-content: space-between;
	 	  margin-top: 6rpx;
			padding:15rpx 30rpx 0rpx 93rpx;
	 	  .pc_text{
	 	 	 color: #333;
	 	 	 font-family: "Microsoft YaHei UI";
	 	 	 font-size: 32rpx;
	 	 	 font-weight: 400;
	 	  }
	 }
 }
 .unBala{
	 width: 722rpx;
	 height: 122rpx;
	 position: absolute;
	 bottom: 120rpx;
	 left: 16rpx;
	 border-radius: 20rpx;
	 background: #FEF9E3;
	 text-align: center;
	 padding-top: 20rpx;
	 .unB_text{
		 color: #333;
		 font-family: "Microsoft YaHei UI";
		 font-size: 24rpx;
		 font-style: normal;
		 font-weight: 400;
		 line-height: normal;
		 .t_tt{
			 color: #FC4C40;
			 font-family: "Microsoft YaHei UI";
			 font-size: 24rpx;
			 font-weight: 400;
			 margin: 0rpx 15rpx 0rpx 15rpx;
		 }
	 }
 }
	.balance_box {
		width: 722rpx;
		height: 100rpx;
		position: absolute;
		bottom: 80rpx;
		left: 16rpx;
		z-index: 101;
		.bottom_balance {
			width: 100%;
			height: 98rpx;
			border-radius: 104rpx;
			background: #231F20;
			box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(0, 0, 0, 0.30);
			position: absolute;
			bottom: 0rpx;
			left: 0rpx;
			display: flex;
			align-items: center;

			.imagess {
				width: 100rpx;
				height: 100rpx;
				position: relative;
				bottom: 30rpx;
				left: 10rpx;
			}

			.total {
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;
				position: absolute;
				top: -10rpx;
				right: -10rpx;
				color: #FFF;
				font-family: "Microsoft YaHei UI";
				font-size: 28rpx;
				font-style: normal;
				font-weight: 400;
				text-align: center;
				line-height: 40rpx;
			}
		}

		.amount {
			min-width: 165rpx;
			height: 76rpx;
			margin-left: 50rpx;

			.unit {
				color: #FFF;
				font-family: "Microsoft YaHei UI";
				font-size: 14px;
				font-style: normal;
				font-weight: 700;
				line-height: 90rpx;
			}

			.totalPay {
				color: #FFF;
				font-family: "Microsoft YaHei UI";
				font-size: 60rpx;
				font-style: normal;
				font-weight: 700;
				margin-left: 8rpx;
			}
		}

		.reduction {
			width: 207rpx;
			height: 60rpx;
			margin-left: 0rpx;

			.totalReduce {
				color: #FFF;
				font-family: "Microsoft YaHei UI";
				font-size: 24rpx;
				font-style: normal;
				font-weight: 400;
				text-decoration: line-through;
			}

			.deliveryFee {
				color: #FFF;
				font-family: "Microsoft YaHei UI";
				font-size: 24rpx;
				font-style: normal;
				font-weight: 400;
				opacity: .6;
			}
		}

		.submitBtn {
			width: 202rpx;
			height: 92rpx;
			border-radius: 36px;
			background: #53A87F;
			text-align: center;
			line-height: 92rpx;
			color: #FFF;
			font-family: "Microsoft YaHei UI";
			font-size: 28rpx;
			font-style: normal;
			font-weight: 700;
			margin-left: auto;
			margin-right: 5rpx;
		}

	}
	.btn_edits{
		width: 152rpx;
		height:52rpx;
		text-align: center;
		line-height:52rpx;
		border-radius: 10rpx;
		color: #FFF;
		font-family: "Microsoft YaHei UI";
		font-size: 28rpx;
		font-weight: 400;
		background: #53A87F;
	}
	.modelcon{
		width:560rpx;
		height: 340rpx;
		padding-top: 20rpx;
		border-radius: 20rpx;
		background-color: #fff;
		.favs{
			text-align: center;
			color: #000;
			font-family: "Microsoft YaHei UI";
			font-size:36rpx;
			font-weight: 400;
		}
		.fav_v{
			padding: 20rpx 25rpx 0rpx 25rpx;
			text-align: left;
			color: #666;
			font-family: "Microsoft YaHei UI";
			font-size:32rpx;
			font-weight: 400;
		}
		.foot_btn{
			display: flex;
			padding: 60rpx 35rpx 0rpx 35rpx;
			justify-content: space-between;
			.btns{
				width: 208rpx;
				height: 80rpx;
				text-align: center;
				line-height: 80rpx;
				border-radius: 10rpx;
				font-size: 32rpx;
			}
			.su{
				background:#53A87F;
				color: #fff;
			}
			.can{
				border:2rpx solid #53A87F;
				color: #53A87F;
			}
		}
	}
</style>